<template>
  <div class="specificltem-content">
    <a-row>
      <a-col :span="24">
        <a-spin :spinning="loading">
          <div class="echart-item" style="height: auto">
            <div class="echart-title">
              <a-icon type="line-chart" />
              <span>考试具体问题车间正确率排行(按照考试)</span>
            </div>
            <div class="select-content">
              <a-select
                v-model="sectionExamId"
                style="width: 240px"
                @change="selectSectionExamChange"
              >
                <a-select-option
                  v-for="item in examData"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
              <a-button type="primary" style="margin-left: 15px" @click="clickSelectQuestion"
                >选择题目</a-button
              >
              <div class="step-name">问题内容：{{ questionName }}</div>
            </div>
            <div class="select-pie">
              <examRank :rankList="examQuestionData" />
            </div>
          </div>
        </a-spin>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-spin :spinning="false">
          <div class="echart-item" style="height: auto">
            <div class="echart-title">
              <a-icon type="line-chart" />
              <span>具体步骤车间正确率排行(按照时间范围)</span>
            </div>
            <div class="select-content">
              <a-range-picker
                v-model="stepShopRightDate"
                @change="stepShopRightDateOnChange"
                style="width: 240px"
              />
              <a-button type="primary" style="margin-left: 15px" @click="selectStepModel('time')">选择题目步骤</a-button
              >
              <div class="step-name">步骤内容：{{ questionStepName }}</div>
            </div>
            <div class="select-pie">
              <examRank :rankList="stepQuestionArr" />
            </div>
          </div>
        </a-spin>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-spin :spinning="false">
          <div class="echart-item" style="height: auto">
            <div class="echart-title">
              <a-icon type="line-chart" />
              <span>考试具体步骤车间正确率排行(按照考试)</span>
            </div>
            <div class="select-content">
              <a-select
                v-model="stepExamId"
                style="width: 240px"
                @change="stepExamChange"
              >
                <a-select-option
                  v-for="item in examData"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
              <a-button type="primary" style="margin-left: 15px" @click="selectStepModel('exam')">选择题目步骤</a-button
              >
              <div class="step-name">步骤内容：{{ questionStepName2 }}</div>
            </div>
            <div class="select-pie">
              <examRank :rankList="stepExamArr" />
            </div>
          </div>
        </a-spin>
      </a-col>
    </a-row>
    <selectQuestionStep
      @selectInform="selectInform"
      :questionArr="stepExamQuestion"
      :questionStepVisible="questionStepVisible"
      @closeFunc="questionStepVisible = false"
    />
    <selectQuestion
      @submitInform="submitInform"
      :questionVisible="questionVisible"
      :questionArr="examQuestionArr"
      @closeFunc="questionVisible = false"
    />
  </div>
</template>

<script>
import {
  stepStates,
  stepErrorDes,
  sectionQuestionInfo,
  sectionQuestionRightRank,
  sectionStepRightInfo,
  sectionExamRightRank,
  shopRighDateRank,
  examShopStepRighRank,
} from "@/api/dataAnalysis";
import { getExamTasksList, getExamTasksDetail } from "@/api/examination";
import { getSpecificName } from "@/assets/js/utils";
import questionDetail from "@/assets/json/questionDetail.js";
import {getQuestionDetail} from "@/assets/js/utils.js";
import selectQuestionStep from "components/base/questionStepSelect";
import examRank from "components/configuration/home/baseEcharts/examRank";
import selectQuestion from "components/base/selectQuestion";
import questionAllList from "@/assets/json/questionList.js";
import moment from 'moment';
export default {
  props: {
    section: {
      type: String,
      default: "",
    },
  },
  components: {
    selectQuestionStep,
    examRank,
    selectQuestion
  },
  data() {
    return {
      loading:false,
      stepExamId: "",
      stepShopRightDate: [moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      sectionExamId: "",
      questionName: "",
      questionStepName:"",
      questionStepName2:"",
      examData: [], //考试列表
      examQuestionData: [],
      examQuestionArr: [],
      stepQuestionArr: [],
      stepExamArr:[],
      questionStepVisible:false,
      questionVisible:false,
      selectQuestionId:1,
      stepArr: [
        {
          questionId: 2,
          stepId:1,
        },
      ],
      selectStepType:'',
      stepExamQuestion:[],
      selectStepExamQuestion:[],
      //////////////////////
    };
  },
  mounted() {
    //this.stepStatesData();
    // this.stepName = this.dealQuestionData(this.stepArr)[0].Key;
    // this.stepErrorDesData();
    // this.sectionQuestionInfoData();
    // this.sectionQuestionRightRankData();
    // this.sectionStepRightInfoData();
    this.getExamTasksData();
    this.shopRighDateRankData();
    this.examShopStepRighRankData();
    this.questionStepName = this.dealQuestionData(this.stepArr)[0].Key;
  },
  methods: {
    dealQuestionData(data) {
      var arrNode = [];
      data.forEach((item) => {
        var questionDetailList = getQuestionDetail(item.questionId);
        var nodeDetail = getSpecificName(
          questionDetailList,
          item.stepId.toString(),
          item.questionId
        );
        item.nodeDetail = nodeDetail;
        item.nodeDetail[0].parentAllNode.push(item.nodeDetail[0].nodeContent);
        arrNode.push({
          Data1: (item.data1 * 100).toFixed(3),
          Key: item.nodeDetail[0].parentAllNode.join("——>"),
        });
      });
      return arrNode;
    },
    //获取默认的题目名称
    getInitQuestionName(questionId){
      var questionArr = questionAllList()
      questionArr.forEach(item =>{
        if(item.id === questionId){
          this.questionName = item.question
        }
      })
    },
    clickSelectQuestion(){
      this.questionVisible = true
    },
    submitInform(val){
      this.selectQuestionId = val.id
      this.questionName = val.question
      this.sectionExamRightRankData()
      this.questionVisible = false
    },
    selectStepModel(type){
      this.selectStepType = type
      if(type === 'time'){
        this.stepExamQuestion =[]
      }
      if(type === 'exam'){
        this.stepExamQuestion = this.selectStepExamQuestion
      }
      this.questionStepVisible = true;
    },
    selectInform(val) {
      this.stepArr[0] = val;
      this.questionStepVisible = false;
      if(this.selectStepType === 'time'){
        this.questionStepName = this.dealQuestionData(this.stepArr)[0].Key;
        this.shopRighDateRankData();
      }
      if(this.selectStepType === 'exam'){
        this.questionStepName2 = this.dealQuestionData(this.stepArr)[0].Key;
        this.examShopStepRighRankData();
      }
    },
    ///具体考试具体步骤排行
    stepExamChange(val) {
      this.stepExamId = val;
      this.stepArr[0].stepId = 1
      this.getStepQuestionArr(val);
    },
    //获取题目步骤基本信息id
    getStepQuestionArr(id) {
      //获取考试里面的题目
      getExamTasksDetail(id)
        .then((res) => {
          // this.examQuestionArr = res.data.paper;
          // this.selectQuestionId = this.examQuestionArr[0]
          // this.getInitQuestionName(this.selectQuestionId)
          // this.sectionExamRightRankData();
          
          this.selectStepExamQuestion = res.data.paper
          this.stepArr[0].questionId = this.examQuestionArr[0]
          this.questionStepName2 = this.dealQuestionData(this.stepArr)[0].Key;
          this.examShopStepRighRankData();
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {});
    },
    examShopStepRighRankData() {
      examShopStepRighRank({
        section: this.section,
        examId: this.stepExamId,
        questionId: this.stepArr[0].questionId,
        stepId: this.stepArr[0].stepId,
      })
        .then((res) => {
          if (res.data) {
            var arrRank = [];
            res.data.histogram.forEach((item) => {
              arrRank.push({
                wordName: item.Key,
                percent: Math.floor(item.Data1 * 100),
              });
            });
            this.stepExamArr = arrRank;
          } else {
            this.stepExamArr = [];
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    ////////具体步骤时间范围内车间正确率排行
    stepShopRightDateOnChange(date, dateString) {
      this.stepShopRightDate = dateString;
      this.shopRighDateRankData();
    },
    shopRighDateRankData() {
      shopRighDateRank({
        section: this.section,
        startTime: this.stepShopRightDate[0],
        endTime: this.stepShopRightDate[1],
        questionId: this.stepArr[0].questionId,
        stepId: this.stepArr[0].stepId,
      })
        .then((res) => {
          if (res.data) {
            var arrRank = [];
            res.data.histogram.forEach((item) => {
              arrRank.push({
                wordName: item.Key,
                percent: Math.floor(item.Data1 * 100),
              });
            });
            this.stepQuestionArr = arrRank;
          } else {
            this.stepQuestionArr = [];
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {});
    },
    ////////段下某次考试具体某一项车间正确率排行
    selectSectionExamChange(val) {
      this.sectionExamId = val;
      this.getQuestionArr(val);
      //this.sectionExamRightRankData();
    },
    //获取题目基本信息id
    getQuestionArr(id) {
      //获取考试里面的题目
      getExamTasksDetail(id)
        .then((res) => {
          this.examQuestionArr = res.data.paper;
          this.selectQuestionId = this.examQuestionArr[0]
          this.getInitQuestionName(this.selectQuestionId)
          this.sectionExamRightRankData();
          
          // this.selectStepExamQuestion = res.data.paper
          // this.stepArr[0].questionId = this.examQuestionArr[0]
          // this.examShopStepRighRankData();
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {});
    },
    sectionExamRightRankData() {
      this.loading = true
      sectionExamRightRank({
        section: this.section,
        examId:this.sectionExamId,
        questionId: this.selectQuestionId,
      })
        .then((res) => {
          if (res.data) {
            var arrRank = [];
            res.data.histogram.forEach((item) => {
              arrRank.push({
                wordName: item.Key,
                percent: Math.floor(item.Data1 * 100),
              });
            });
            this.examQuestionData = arrRank;
          } else {
            this.examQuestionData = [];
          }
          this.loading = false
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //获取考试列表
    getExamTasksData() {
      var params = {
        page: 1,
        limit: 99999999,
        section: this.section,
        name: "",
      };
      getExamTasksList(params)
        .then((res) => {
          this.examData = res.data.examSimpleInfo;
          this.sectionExamId = res.data.examSimpleInfo[0].id;
          this.stepExamId = res.data.examSimpleInfo[0].id;
          this.getQuestionArr(this.sectionExamId);
          this.getStepQuestionArr(this.stepExamId)
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },

  },
};
</script>

<style lang="stylus" scoped>
.echarts-content {
  .echart-title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333;
    overflow: hidden;
    width: 100%;

    span {
      margin-left: 10px;
    }
  }
}

.echart-item {
  height: 500px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  box-sizing: border-box;
}

.tab-content {
  margin-top: 15px;

  .tab {
    text-align: left;
  }

  .tab-box {
    margin-top: 20px;
  }
}

.select-content {
  margin-top: 20px;
}

.step-name {
  margin-top: 20px;
}

.right-rank-content {
  display: flex;
  justify-content: flex-start;

  button {
    margin-left: 15px;
  }
}
</style>
